<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的优惠券</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2627533_d7zlvvj6zdr.css">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #8c8c8c;
            font-size: 0.75rem;
        }
        .nav-item.active {
            color: #0052d9;
        }
        .icon {
            font-size: 1.5rem;
            margin-bottom: 0.25rem;
        }
        .tab-item {
            position: relative;
            padding: 12px 0;
            font-size: 14px;
            flex: 1;
            text-align: center;
            color: #666;
        }
        .tab-item.active {
            color: #0052d9;
            font-weight: 500;
        }
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background-color: #0052d9;
            border-radius: 2px;
        }
        .coupon-card {
            position: relative;
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .coupon-card::before {
            content: '';
            position: absolute;
            left: -4px;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 16px;
            background-color: #f5f5f5;
            border-radius: 0 8px 8px 0;
        }
        .coupon-card::after {
            content: '';
            position: absolute;
            right: -4px;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 16px;
            background-color: #f5f5f5;
            border-radius: 8px 0 0 8px;
        }
        .coupon-body {
            position: relative;
            padding: 16px;
            display: flex;
        }
        .coupon-body::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            border-bottom: 1px dashed #e0e0e0;
        }
        .coupon-usable {
            background: linear-gradient(135deg, #FF5252, #FF1744);
            color: white;
        }
        .coupon-expired {
            background: #bdbdbd;
            color: white;
        }
        .coupon-used {
            background: #9e9e9e;
            color: white;
        }
        .coupon-expiring {
            background: linear-gradient(135deg, #FF9800, #FF6D00);
            color: white;
        }
        .badge {
            position: absolute;
            top: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.2);
            color: white;
            padding: 2px 8px;
            font-size: 10px;
            border-radius: 0 0 0 8px;
        }
        .primary-btn {
            background-color: #0052d9;
            color: white;
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 12px;
        }
        .secondary-btn {
            background-color: #f0f0f0;
            color: #666;
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 12px;
        }
    </style>
</head>
<body class="pb-16">
    <header class="bg-white p-4 flex items-center shadow-sm">
        <a href="../core/profile.html" class="mr-4">
            <i class="icon iconfont icon-arrow-left"></i>
        </a>
        <h1 class="text-lg font-medium flex-1 text-center">我的优惠券</h1>
        <a href="#" class="text-sm text-gray-500">使用规则</a>
    </header>

    <!-- 优惠券状态标签 -->
    <div class="bg-white flex border-b border-gray-200 sticky top-0 z-10">
        <div class="tab-item active">可使用</div>
        <div class="tab-item">即将过期</div>
        <div class="tab-item">已使用</div>
        <div class="tab-item">已过期</div>
    </div>

    <!-- 优惠券列表 -->
    <div class="p-3">
        <!-- 优惠券1：可使用 -->
        <div class="coupon-card mb-4">
            <div class="coupon-body coupon-usable">
                <div class="mr-4 flex flex-col justify-center items-center">
                    <div class="text-3xl font-bold">¥50</div>
                    <div class="text-xs mt-1">满200可用</div>
                </div>
                <div class="flex-1">
                    <div class="text-sm font-medium">贵州旅游通用优惠券</div>
                    <div class="text-xs mt-1 opacity-80">适用于平台所有旅游产品</div>
                    <div class="text-xs mt-2 opacity-80">有效期至：2025-07-30</div>
                </div>
            </div>
            <div class="p-3 flex justify-between items-center bg-white">
                <div class="text-xs text-gray-500">
                    限制：单笔订单仅限使用一张
                </div>
                <button class="primary-btn">去使用</button>
            </div>
        </div>

        <!-- 优惠券2：可使用 -->
        <div class="coupon-card mb-4">
            <div class="coupon-body coupon-usable">
                <div class="mr-4 flex flex-col justify-center items-center">
                    <div class="text-3xl font-bold">¥30</div>
                    <div class="text-xs mt-1">满100可用</div>
                </div>
                <div class="flex-1">
                    <div class="text-sm font-medium">贵州美食专享券</div>
                    <div class="text-xs mt-1 opacity-80">适用于平台所有餐饮商家</div>
                    <div class="text-xs mt-2 opacity-80">有效期至：2025-08-15</div>
                </div>
            </div>
            <div class="p-3 flex justify-between items-center bg-white">
                <div class="text-xs text-gray-500">
                    限制：仅限堂食使用
                </div>
                <button class="primary-btn">去使用</button>
            </div>
        </div>

        <!-- 优惠券3：即将过期 -->
        <div class="coupon-card mb-4">
            <div class="coupon-body coupon-expiring">
                <div class="badge">3天后过期</div>
                <div class="mr-4 flex flex-col justify-center items-center">
                    <div class="text-3xl font-bold">¥20</div>
                    <div class="text-xs mt-1">满60可用</div>
                </div>
                <div class="flex-1">
                    <div class="text-sm font-medium">康养服务体验券</div>
                    <div class="text-xs mt-1 opacity-80">适用于指定康养项目</div>
                    <div class="text-xs mt-2 opacity-80">有效期至：2025-06-15</div>
                </div>
            </div>
            <div class="p-3 flex justify-between items-center bg-white">
                <div class="text-xs text-gray-500">
                    限制：首次体验专享
                </div>
                <button class="primary-btn">去使用</button>
            </div>
        </div>

        <!-- 优惠券4：已使用 -->
        <div class="coupon-card mb-4">
            <div class="coupon-body coupon-used">
                <div class="badge">已使用</div>
                <div class="mr-4 flex flex-col justify-center items-center">
                    <div class="text-3xl font-bold">¥100</div>
                    <div class="text-xs mt-1">满300可用</div>
                </div>
                <div class="flex-1">
                    <div class="text-sm font-medium">黄果树瀑布门票优惠券</div>
                    <div class="text-xs mt-1 opacity-80">仅限黄果树景区使用</div>
                    <div class="text-xs mt-2 opacity-80">使用时间：2025-05-20</div>
                </div>
            </div>
            <div class="p-3 flex justify-between items-center bg-white">
                <div class="text-xs text-gray-500">
                    限制：单日预约限用一张
                </div>
                <button class="secondary-btn">再次获取</button>
            </div>
        </div>

        <!-- 优惠券5：已过期 -->
        <div class="coupon-card">
            <div class="coupon-body coupon-expired">
                <div class="badge">已过期</div>
                <div class="mr-4 flex flex-col justify-center items-center">
                    <div class="text-3xl font-bold">¥40</div>
                    <div class="text-xs mt-1">满120可用</div>
                </div>
                <div class="flex-1">
                    <div class="text-sm font-medium">民宿预订专享券</div>
                    <div class="text-xs mt-1 opacity-80">适用于平台所有民宿</div>
                    <div class="text-xs mt-2 opacity-80">过期时间：2025-05-01</div>
                </div>
            </div>
            <div class="p-3 flex justify-between items-center bg-white">
                <div class="text-xs text-gray-500">
                    限制：周末不可用
                </div>
                <button class="secondary-btn">删除</button>
            </div>
        </div>
    </div>

    <!-- 领券中心入口 -->
    <div class="fixed bottom-16 left-0 right-0 p-3 bg-white border-t border-gray-200">
        <button class="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 rounded-lg font-medium">
            前往领券中心
        </button>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around py-2">
            <a href="../core/home.html" class="nav-item">
                <i class="icon iconfont icon-home"></i>
                <span>首页</span>
            </a>
            <a href="../core/discover.html" class="nav-item">
                <i class="icon iconfont icon-discover"></i>
                <span>发现</span>
            </a>
            <a href="../core/messages.html" class="nav-item">
                <i class="icon iconfont icon-message"></i>
                <span>消息</span>
            </a>
            <a href="../core/profile.html" class="nav-item active">
                <i class="icon iconfont icon-user"></i>
                <span>我的</span>
            </a>
        </div>
    </div>
</body>
</html> 